<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="星时代" />
    <%- include("layout/css_includ.ejs") %>
        <script>
            window.__loadStartTime = new Date().getTime();
        </script>
        <title>首页</title>
</head>

<body>

    <div class="container-fluid bg-nav">
        <div class="container">
            <div class="row">
                <div class="col-12 bg-nav">
                    <%- include("layout/nav.ejs") %>
                </div>
            </div>
        </div>
    </div>
    <!--头部结束-->

    <!--正文-->
    <div class="container">
        <div class="row">
            <!-- 可变区域-->
            <div class="col-sm-12 col-md-12 col-lg-9 bg-white my-3">
                <div class="container-fluid">
                    <div class="row mt-3 w-100 p-0 m-0">
                        <div class="col-12 p-0 m-auto">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active" aria-current="page">首页</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row mt-2 p-2">
                        <div class="col-sm-12 col-md-6 px-4">
                            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="/images/webaddinfo.b3d9efdf.png" class="d-block w-100"
                                            style="height: 150px;" alt="...">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="https://www.gavtc.cn/images/dangshi1.jpg" style="height: 150px;"
                                            class="d-block w-100" alt="...">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="https://www.gavtc.cn/images/zhiyejiaoyu.jpg" class="d-block w-100"
                                            style="height: 150px;" alt="...">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                    data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                    data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>

                        </div>
                        <div class="col-sm-12 col-md-6">
                            <p style="text-indent: 2em;color: darkgrey;font-size:1em;">
                                生活总是千变万化，总有那么多不如意，总有那么多不顺心，只要自己坚守自己的理想，就不会被打倒，再大的风浪阻挡不了我们前进的方向，坚持就是胜利，无论怎样，都不认输。
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row mt-3 mb-0">
                        <div class="col-12 px-4 text-dark" style="text-indent: 2em;">
                            <p>
                                本网站主要采用Java、Node等后端语言构建服务Api接口，采用MySql作为数据库存储数据。采用Jquery，BootStrap，Vue，Ant-d、axios
                                构建用户界面。运行在Linux环境中！
                            </p>
                            <p>
                                用户通过例如谷歌、火狐、IE 等浏览器访问本站，首先会进入Nginx服务器，通过反向代理，将请求转发到基于Express框架的Node服务器上，
                                Node服务器又向基于SpringBoot框架的Tomcat服务器发送请求。Tomcat接收到请求之后，通过三层架构当中的Dao层访问MySql服务，进行一系列的操作，
                                最终将结果封装以JSON形式返回给Node服务器，Node服务器对数据进行处理用EJS模板引擎渲染数据展示给用户。
                            </p>
                        </div>
                    </div>
                    <div class="row mt-0 mb-3">
                        <div class="col-12 px-0">
                            <div>
                                <img src="/images/webaddinfo.b3d9efdf.png" class="img-fluid" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 可变区域结束-->

            <div class="col-sm-12 col-md-12 col-lg-3 ">
                <!-- 卡片-->
                <div class="mycard w-100 my-3">
                    <div class="mycard-head p-2">
                        <p class="text-white mb-0 ml-2">
                            <i class="fa fa-cloud" aria-hidden="true"></i> 天气
                        </p>
                    </div>
                    <div class="mycard-body bg-white p-2">
                        <iframe style="width: 100%;" scrolling="no" height="150" frameborder="0"
                            allowtransparency="true"
                            src="http://i.tianqi.com/index.php?c=code&amp;id=21&amp;icon=1&amp;num=1"></iframe>
                    </div>
                </div>

                <!-- 卡片-->
                <div class="mycard w-100 my-3">
                    <div class="mycard-head p-2">
                        <p class="text-white mb-0 ml-2">
                            <i class="fa fa-bell-o" aria-hidden="true"></i> 统计信息
                        </p>
                    </div>
                    <div class="mycard-body bg-white p-2">
                        <p class="mb-0 mx-2">语言 Java NodeJs </p>

                        <p class="mb-0 mx-2">当前在线 <%= online %> 人</p>
                        <p class="mb-0 mx-2">欢迎来自
                            <span style="color: red;" id="city">地球</span>
                            的游客访问。
                        </p>
                        <p class="mb-0 mx-2">本次加载共花费
                            <span style="color: red;" id="loadTime">0</span>
                            秒。
                        </p>
                        <table class="mt-3 w-100 text-center">
                            <thead>
                                <tr class="text-danger">
                                    <th>原创</th>
                                    <th>资源</th>
                                    <th>评论</th>
                                    <th>访问量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="text-align: center;">
                                    <td>
                                        <span class="badge badge-info badge-sm">311</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-danger badge-sm">50</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-success badge-sm">35</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-primary badge-sm">7545</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 卡片-->
                <div class="mycard w-100 my-3">
                    <div class="mycard-head p-2">
                        <p class="text-white mb-0 ml-2">
                            <i class="fa fa-book" aria-hidden="true"></i> 最新文章
                        </p>
                    </div>
                    <div class="mycard-body bg-white p-2">
                        <% data.forEach((element,index)=> { %>
                            <p id="new-article" class="m-2 p-0" onclick="showArticleById('<%=element.id %>')">
                                <% if (index<3) { %>
                                    <span style="color: red;">
                                        <%=index+1 %>.
                                    </span>
                                    <% } else {%>
                                        <span style="">
                                            <%=index+1 %>.
                                        </span>

                                        <% }%>

                                            <%= element.title %>
                            </p>
                            <% }) %>
                    </div>
                </div>

                <!-- 卡片-->
                <div class="mycard w-100 my-3">
                    <div class="mycard-head p-2">
                        <p class="text-white mb-0 ml-2">
                            <i class="fa fa-users" aria-hidden="true"></i> 友情链接
                        </p>
                    </div>
                    <div class="mycard-body bg-white p-2 text-center">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <a href="https://www.cnblogs.com/botaoJava/" target="_blank">博客园</a>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <a href="https://www.bootcdn.cn/" target="_blank">bootcdn</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--正文结束-->
    <%- include("layout/foot.ejs") %>
        <%- include("layout/js_includ.ejs") %>
            <script src="http://ip.ws.126.net/ipquery"></script>
            <script type="text/javascript">
                $(function () {
                    console.log(localAddress)
                    $("#city").html(lo + lc);

                    var loadTime = (new Date().getTime() - window.__loadStartTime) / 1000;
                    var loadTimeNode = document.getElementById("loadTime")
                    if (loadTimeNode != null) {
                        loadTimeNode.innerText = loadTime;
                    }
                    console.log("[info]" + location.href + "页面加载完毕,花费" + loadTime + "秒")
                })
            </script>
</body>

</html>